<template>
    <view>
        <view v-if="isLoad === null" class="margin-top load notexist text-l text-grey"></view>
        <view v-if="isLoad === false" class="margin-top load loading text-l text-grey"></view>

        <block v-if="isAdmin && isLoad">
            <view class="main-admin">
                <view class="table margin-bottom sticky1" style="width: 100%">
                    <view class="table-top">
                        <view class="table-form">
                            <view class="item">
                                <view class="title">起始日期：</view>
                                <cmpt-picker-time
                                    mode="day"
                                    style="flex: 1"
                                    startYear="2022"
                                    endYear="2025"
                                    :item="searchDayStart"
                                    @select="url($event, { type: 'picker', item: 'searchDayStart' })"
                                    data-type="picker"
                                    data-item="searchDayStart"
                                >
                                    <view class="content">
                                        {{ searchDayStart }}
                                        <text v-if="!searchDayStart" class="margin-left-xxs icon-calendar"></text>
                                    </view>
                                </cmpt-picker-time>
                            </view>

                            <view class="item">
                                <view class="title">结束日期：</view>
                                <cmpt-picker-time
                                    mode="day"
                                    style="flex: 1"
                                    startYear="2022"
                                    endYear="2025"
                                    :item="searchDayEnd"
                                    @select="url($event, { type: 'picker', item: 'searchDayEnd' })"
                                    data-type="picker"
                                    data-item="searchDayEnd"
                                >
                                    <view class="content">
                                        {{ searchDayEnd }}
                                        <text v-if="!searchDayEnd" class="margin-left-xxs icon-calendar"></text>
                                    </view>
                                </cmpt-picker-time>
                            </view>
                            <view class="oprt">
                                <view @tap="bindSearchYesterdayTap" hover-class="button-hover" class="min-btn margin-right-xs">昨日</view>
                                <view @tap="bindSearchTodayTap" hover-class="button-hover" class="min-btn margin-right-xs">今日</view>
                                <view @tap="bindSearchTomorrowTap" hover-class="button-hover" class="min-btn margin-right-xs">明日</view>
                                <!-- <view bindtap="bindSearchClearTap" hover-class="button-hover" class="margin-right-xs">清空</view> -->
                                <view @tap="bindSearchTap" hover-class="button-hover" class="submit margin-right-xs">搜索</view>
                            </view>
                        </view>
                        <!-- 表格头 start -->
                        <view class="thead border">
                            <view class="td" style="width: 220rpx">时段</view>
                            <view class="td" style="width: 230rpx">已预约/名额</view>
                            <view class="td" style="width: 150rpx">取消</view>
                            <view class="td full">查看</view>
                        </view>
                        <!-- 表格头 end -->
                    </view>

                    <!-- 表格体 start -->
                    <view class="tbody" v-for="(item, index) in daysSet" :key="index">
                        <view class="line">
                            <text :class="(item.day < now ? 'text-grey' : '') + ' ' + (item.day == now ? 'text-blue text-bold' : '')">
                                {{ item.day }}
                                <text v-if="item.day < now" class="margin-left-xxs">(已过期)</text>
                                <text v-if="item.day == now" class="margin-left-xxs">(今日)</text>
                            </text>
                        </view>

                        <view class="tr stripe border" v-for="(itm, idx) in item.times" :key="idx">
                            <view class="td" style="width: 220rpx">{{ itm.start }}～{{ itm.end }}</view>

                            <view class="td" style="width: 230rpx">
                                <text :class="itm.stat.succCnt ? 'text-bold' : ''">{{ itm.stat.succCnt }}</text>
                                <text class="margin-right-xxxs margin-left-xxxs">/</text>
                                {{ itm.isLimit ? itm.limit : '不限' }}
                            </view>

                            <view class="td text-grey" style="width: 150rpx">{{ itm.stat.cancelCnt + itm.stat.adminCancelCnt }}</view>

                            <view
                                @tap="url"
                                :data-url="
                                    '../join/admin_meet_join?meetId=' +
                                    meetId +
                                    '&mark=' +
                                    itm.mark +
                                    '&dayidx=' +
                                    index +
                                    '&timeidx=' +
                                    idx +
                                    '&title=' +
                                    titleEn +
                                    '&time=' +
                                    (item.day + ' ' + itm.start + '-' + itm.end)
                                "
                                class="td full"
                            >
                                名单
                                <text class="icon-right"></text>
                            </view>
                        </view>
                    </view>

                    <view v-if="daysSet === null" class="no-data">数据加载中...</view>
                    <view v-if="daysSet.length == 0" class="no-data">没有数据哦~</view>
                </view>
            </view>

            <!-- top begin -->
            <button v-if="topShow" class="btn-fixed bg-gray text-gray btn-top" @tap="bindTopTap" style="bottom: 100rpx"><text class="icon-top"></text></button>
            <!-- top END. -->
        </block>
    </view>
</template>

<script>
import cmptPickerTime from '../../../../cmpts/public/picker_time/picker_time_cmpt';
const AdminBiz = require('../../../../biz/admin_biz.js');
const pageHelper = require('../../../../helper/page_helper.js');
const cloudHelper = require('../../../../helper/cloud_helper.js');
const timeHelper = require('../../../../helper/time_helper.js');
export default {
    components: {
        cmptPickerTime
    },
    data() {
        return {
            isLoad: false,
            now: timeHelper.time('Y-M-D'),
            searchDayStart: '',
            searchDayEnd: '',
            daysSet: null,
            title: '',
            titleEn: '',
            topShow: false,
            isAdmin: '',

            itm: {
                start: '',
                end: '',

                stat: {
                    succCnt: false,
                    cancelCnt: '',
                    adminCancelCnt: ''
                },

                mark: ''
            },

            meetId: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: async function (options) {
        if (!pageHelper.getOptions(this, options, 'meetId')) {
            return;
        }
        if (!AdminBiz.isAdmin(this)) {
            return;
        }
        let searchDayStart = timeHelper.time('Y-M-D');
        let searchDayEnd = timeHelper.time('Y-M-D');
        this.setData(
            {
                searchDayStart,
                searchDayEnd
            },
            () => {
                this.loadDetailFun();
            }
        );
        if (options && options.title) {
            let title = decodeURIComponent(options.title);
            this.setData({
                title,
                titleEn: options.title
            });
            uni.setNavigationBarTitle({
                title: '预约名单统计 - ' + title
            });
        }
    },
    onPageScroll: function (e) {
        if (e.scrollTop > 100) {
            this.setData({
                topShow: true
            });
        } else {
            this.setData({
                topShow: false
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: async function () {
        await this.loadDetailFun();
        uni.stopPullDownRefresh();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    methods: {
        loadDetailFun: async function () {
            let meetId = this.meetId;
            if (!meetId) {
                return;
            }
            let params = {
                meetId,
                start: this.searchDayStart,
                end: this.searchDayEnd
            };
            let opt = {
                title: 'bar'
            };
            try {
                this.setData({
                    daysSet: null
                });
                await cloudHelper.callCloudSumbit('admin/meet_day_list', params, opt).then((res) => {
                    this.setData({
                        isLoad: true,
                        daysSet: res.data
                    });
                });
            } catch (err) {
                console.log('CatchClause', err);
                console.log('CatchClause', err);
                console.error(err);
            }
        },

        bindSearchTomorrowTap: function (e) {
            this.setData(
                {
                    searchDayStart: timeHelper.time('Y-M-D', 86400),
                    searchDayEnd: timeHelper.time('Y-M-D', 86400)
                },
                () => {
                    this.loadDetailFun();
                }
            );
        },

        bindSearchYesterdayTap: function (e) {
            this.setData(
                {
                    searchDayStart: timeHelper.time('Y-M-D', -86400),
                    searchDayEnd: timeHelper.time('Y-M-D', -86400)
                },
                () => {
                    this.loadDetailFun();
                }
            );
        },

        bindSearchTodayTap: function (e) {
            this.setData(
                {
                    searchDayStart: timeHelper.time('Y-M-D'),
                    searchDayEnd: timeHelper.time('Y-M-D')
                },
                () => {
                    this.loadDetailFun();
                }
            );
        },

        bindTopTap: function () {
            uni.pageScrollTo({
                scrollTop: 0
            });
        },

        bindSearchTap: function (e) {
            this.loadDetailFun();
        },

        url: function (e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            pageHelper.url(e, this);
        }
    }
};
</script>
<style>
@import './admin_record_list.css';
</style>
